<template>
	<view class="app-container apply">
		<u-cell-group>
			<u-cell title="加班时间" isLink :value="form.overTime || '请选择'" @click="overTimeShow = true"></u-cell>
			<u-cell title="加班类型" :value="'平时加班'" @click="handleCheckApplyType" index='1'></u-cell>
			<view class="line"></view>
			<u-cell title="开始时间" isLink :value="form.startTime || '请选择'" @click="handleChooseTime('start')"></u-cell>
			<u-cell title="结束时间" isLink :value="form.endTime || '请选择'" @click="handleChooseTime('end')"></u-cell>
			<u-cell title="时长" :value="form.total || '请选择'"></u-cell>
			<view class="line"></view>
			<u-cell title="加班转调休">
				<template slot="value">
					<u-switch v-model="form.compensatory" @change="form.compensator = !form.compensator"></u-switch>
				</template>
			</u-cell>
			<view class="line"></view>
			<u-cell title="加班原因" isLink :value="form.reason || '请选择'"></u-cell>
			<view class="line"></view>
			<u-cell title="用餐时数">
				<template slot="value">
					<u--input type='number' placeholder="请输入内容" border="none" inputAlign="right"
						v-model="form.dining"></u--input>
				</template>
			</u-cell>
			<view class="line"></view>
			<view class="formItem">
				<view class="formItemLable">
					详细说明
				</view>
				<view class=" space">
					<u--textarea v-model="form.remark" :autoHeight="true" placeholder="请输入" border='bottom'
						height='300rpx' count></u--textarea>
				</view>
			</view>
		</u-cell-group>
		<view class="footerBtn">
			<u-button class='cust-style' text="提交"></u-button>
		</view>
		<!-- <u-select v-model="visible" :list="list"></u-select> -->
		<!-- <view class="form">
			<u-cell-group >
				<u-cell  title="开始时间" :isLink="true" @click="" arrow-direction="right"></u-cell>
				<u-cell  title="结束时间" :isLink="false"></u-cell>
			</u-cell-group>
			
		</view> -->
		<u-datetime-picker ref="datetimePicker" :show="startTimeVisible" @cancel='handleCancel'
			@confirm="(val)=>handleSaveTime(val,'startTime')" mode="time"></u-datetime-picker>
		<u-datetime-picker ref="datetimePicker1" :show="endTimeVisible" @cancel='handleCancel'
			@confirm="(val)=>handleSaveTime(val,'endTime')" mode="time"></u-datetime-picker>

		<u-datetime-picker ref="datetimePicker2" :show="overTimeShow" @cancel='overTimeShow = false'
			@confirm="handleSaveOverTime" :value="defaultValueEnd" mode="date"></u-datetime-picker>

		<u-picker :show="show" :columns="columns" @cancel='show = false' @confirm='handleChange'></u-picker>
		<u-picker :show="show1" :columns="columns2" @cancel='show1 = false' @confirm='handleChange2'></u-picker>
	</view>
</template>

<script>
	import dayjs from '@/utils/dayjs.js'
	export default {
		data() {
			return {
				defaultValueEnd: dayjs().valueOf(),
				show: false,
				show1: false,
				visible: true,
				startTimeVisible: false,
				endTimeVisible: false,
				overTimeShow: false,
				timeType: 'start',
				columns: [
					['事假', '年假', '婚嫁', '其他']
				],
				columns2: [
					['事假', '年假', '婚嫁', '其他']
				],
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],

				form: {
					startTime: '',
					endTime: '',
					applyType: '',
					total: '',
					dining: '',
					reason: '',
					remark: '',
					compensatory: true,
					overTime: dayjs().format('YYYY-MM-DD')
				}

			};
		},
		methods: {
			handleOver() {
				this.overTimeShow = true

			},
			handleSaveOverTime(val) {
				console.log(val)
				const {
					value = ''
				} = val
				this.form.overTime = dayjs(value).format('YYYY-MM-DD')
				this.overTimeShow = false
			},
			handleSaveTime(val, key) {
				console.log(val)
				const {
					overTime,
					startTime,
					endTime
				} = this.form
				const {
					value = ''
				} = val
				this.form[key] = value
				if (key === 'endTime') {
					const start = dayjs(`${overTime} ${startTime}`).format('YYYY-MM-DD HH:mm')
					const end = dayjs(`${overTime} ${value}`).format('YYYY-MM-DD HH:mm')
					console.log(overTime, start, end, dayjs(end).diff(dayjs(start), 'hours'))
					this.form.total = dayjs(end).diff(dayjs(start), 'hours') > 0 ? dayjs(end).diff(dayjs(start), 'hours') :
						0
				}
				this.startTimeVisible = false
				this.endTimeVisible = false

			},
			handleCancel() {
				this.startTimeVisible = false
				this.endTimeVisible = false
			},
			handleChooseTime(eventType) {
				if (eventType === 'start') {
					return this.startTimeVisible = true
				}
				return this.endTimeVisible = true
			},
			handleCheckApplyType(index) {
				console.log(index)
				this.show = true
			},
			handleChange(val) {
				const {
					value
				} = val
				console.log(value)
				this.form.applyType = value[0]
				this.show = false
			},
			handleChange2(val) {
				const {
					value
				} = val
				this.form.reason = value[0]
				this.show1 = false
			}
		}
	}
</script>

<style lang="scss">
	.u-cell {
		background-color: #fff;
	}

	.line {
		height: 24px;
	}

	.apply {
		.footerBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: border-box;
			padding: 24px 12px;
			background-color: #fff;
			width: 100%;

			.cust-style {
				background-color: #78A25a;
				color: #fff;
			}

		}
	}

	.app-container {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(246, 247, 251);


		.formItem {
			background-color: #fff;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 16px 10px;

			.formItemLable {
				flex-shrink: 0;
				font-size: 15px;
			}

			.formItemValue {
				flex: 1;
				font-size: 18px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

		}


		// 	.u-cell__body{

		// 	}
		// 	.u-cell__body__content[data-v-1c4434ae]{
		// 		flex-shrink: 0
		// 	};
		// 	.u-textarea{
		// 		flex: 0 0 100%;
		// 	}
		// }

		.space {
			flex: 0 0 100% !important;

		}

		.formItem+.formItem {
			border-top: 1px solid #eee;
		}


	}
</style>